<template>
  <div style="display: inline-block;">
    <el-button type="warning" icon="el-icon-tickets" circle title="资料详情" @click="getLists"/>
    <el-dialog :visible.sync="dialogTableVisible" title="资料详情" style="width:100%; margin-right:300px;">
      <div class="filter-container">
        <!--<addPage @getLists="getLists"/>-->
      </div>
      <el-table v-loading="listLoading" :key="tableKey" :data="list" border fit highlight-current-row height="100" style="width: 100%;">
        <el-table-column v-if="formThead.id" align="center" label="id">
          <template slot-scope="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="formThead.name" align="center" label="姓名">
          <template slot-scope="scope">
            <span>{{ scope.row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="formThead.IDType" align="center" label="证件类型">
          <template slot-scope="scope">
            <span>{{ scope.row.IDType }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="formThead.IDNumber" align="center" label="证件号码">
          <template slot-scope="scope">
            <span>{{ scope.row.IDNumber }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="formThead.companyName" align="center" label="公司名称">
          <template slot-scope="scope">
            <span>{{ scope.row.companyName }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="formThead.businessLicense" align="center" label="营业执照">
          <template slot-scope="scope">
            <span>{{ scope.row.businessLicense }}</span>
          </template>
        </el-table-column>
        <el-table-column v-if="formThead.merchantID" align="center" label="商家ID">
          <template slot-scope="scope">
            <span>{{ scope.row.merchantID }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <editPage :row_data="scope.row" @getLists="getLists"/>
            <el-button type="danger" icon="el-icon-delete" circle title="删除" @click="del(scope.row.id)"/>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-dragDialog' // base on element-ui
import { getAuditList } from '@/api/merchant/merchant_audit_data'
import store from '@/store'
import waves from '@/directive/waves' // 水波纹指令
// import addPage from '@/merchant/details_addPage'
// import editPage from '@/merchant/details_editPage'
export default {
  name: 'DragDialogDemo',
  directives: { elDragDialog, waves },
  components: { },
  props: {
    row_data: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function() {
        return null
      }
    }
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      dialogTableVisible: false,
      listQuery: {
        id: undefined,
        name: undefined,
        IDType: undefined,
        IDNumber: undefined,
        companyName: undefined,
        businessLicense: undefined,
        merchantID: undefined,
        page: 1,
        limit: 20
      },
      formThead: {
        id: true,
        name: true,
        IDType: true,
        IDNumber: true,
        companyName: true,
        businessLicense: true,
        merchantID: true
      }
    }
  },
  methods: {
    // submitForm() {
    //   add(store.getters.token, this.row_data).then(res => {
    //     this.$emit('getLists')
    //     this.close()
    //   })
    // },
    close() {
      this.dialogTableVisible = false
    },
    getLists() {
      this.dialogTableVisible = true
      this.listLoading = true
      getAuditList(store.getters.token, this.listQuery).then(response => {
        this.list = response.data.list.data
        this.total = response.data.list.total
        this.listLoading = false
      })
    }
  }
}
</script>

